<template>
  <div class="xq-form-wrapper page-miH page-bgBack p24">
    <a-row type="flex" align="middle" justify="space-between">
      <a-col>
        <a-input-search allowClear v-model="searchName" placeholder="输入批次名称" class="mr12" style="width: 240px" @search="onSearch" />
        <a-month-picker
          v-model="time"
          placeholder="请选择月份"
          valueFormat="YYYY-MM"
          class="mr12"
          style="width: 240px"
          @change="onSearch"
        />
        <a-tree-select
          v-model="authId"
          :tree-data="dataList"
          show-search
          style="width: 270px"
          :allowClear="true"
          placeholder="企业/税局"
          treeNodeFilterProp="title"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :replaceFields="replaceFields"
          :treeDefaultExpandAll="true"
          @change="onChange"
          dropdownClassName="taxCalculate-select-action-popover"
        ></a-tree-select>
      </a-col>
      <a-col>
        <a-button type="primary" v-if="$hasPermission('zhinengsuanshui:geshuijisuan:create')" @click="onAdd">创建算税批次</a-button>
      </a-col>
    </a-row>
    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :customize="FormJson['config']['table']['customize']"
        :scroll="{ x: columns.length * 150 }"
        :pagination="false"
        :dataSource="tableData"
        :columns="columns"
      >
        <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
          <span :key="index">{{ col.customTitle }}</span>
        </template>
        <!-- eslint-disable-next-line prettier/prettier -->
        <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
          <div v-if="col.dataIndex === 'gmtCreate'" :key="index">{{ text ? moment(text).format("YYYY-MM-DD HH:mm") : "--" }}</div>
          <div v-else-if="col.dataIndex === 'status'" :key="index">{{ getCalculateTaxStatus(text) }}</div>

          <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
            <a @click="onInfo(record)">详情</a>
            <a-divider type="vertical" />
            <a-popconfirm
              v-if="record.status !== 2 && $hasPermission('zhinengsuanshui:geshuijisuan:del')"
              :title="`确认要删除吗？`"
              ok-text="确认"
              cancel-text="取消"
              @confirm="onClose(record.id)"
            >
              <a>删除</a>
            </a-popconfirm>
            <a-tooltip v-if="record.status === 2 && $hasPermission('zhinengsuanshui:geshuijisuan:del')">
              <template slot="title"> 算税中不可删除 </template>
              <a>删除</a>
            </a-tooltip>
          </span>
          <span v-else-if="col.dataIndex === 'period'" :key="index"> {{ text.substring(0, 4) }}-{{ text.substring(4, 6) }} </span>

          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
        </template>
      </XqTable>
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="pageNo"
          :total="total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['10', '20', '50', '100']"
          :page-size="pageSize"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
    </a-spin>
    <select-way :visible.sync="visible" @changeSW="changeSW" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import selectWay from "./component/select-way";
import { calculateTaxStatus } from "./dataStatic";
import { getCalculateBatches, delCalculateBatchesdeleteById, getCompanyAuthoritiesListAll } from "./api";
const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});
export default {
  mixins: [curdMixin],
  components: {
    selectWay
  },
  data() {
    return {
      calculateTaxStatus,
      authId: undefined,
      replaceFields: {
        children: "companyAuthorityList",
        title: "responsibleAuthorityName",
        key: "id",
        value: "id"
      },
      visible: false,
      editJson: {},
      searchName: null,
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      time: null,
      lock: false,
      dataList: []
    };
  },
  created() {
    this.onGetCalculateBatches();
    this.getCompanyAuthoritiesListAllFun();
  },
  methods: {
    getCalculateTaxStatus(text) {
      return text ? this.calculateTaxStatus[text - 1].label : "";
    },
    onChange(e, selectedOptions, extra) {
      console.log(e, selectedOptions, extra);
      this.onSearch();
    },
    async getCompanyAuthoritiesListAllFun() {
      try {
        const { data } = await getCompanyAuthoritiesListAll();
        this.dataList = data;
        this.dataList.map((e) => {
          e.responsibleAuthorityName = e.name;
          e.disabled = true;
        });
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onSearch() {
      this.pageNo = 1;
      this.onGetCalculateBatches();
    },
    async onGetCalculateBatches() {
      try {
        this.visible = false;
        this.spinning = true;
        const params = {
          name: this.searchName,
          period: this.time ? this.time.replace(/[-]/g, "") : null,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          authId: this.authId
          // "orders[0].property": "gmtCreate",
          // "orders[0].desc": true
        };
        const { data } = await getCalculateBatches(params);
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        this.tableData = [];
        this.total = 0;
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetCalculateBatches();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetCalculateBatches();
    },
    onAdd() {
      this.visible = true;
    },
    onInfo(records) {
      this.$router.push({ name: "calculateInfo", query: { id: records.id } });
    },
    async onClose(id) {
      try {
        await delCalculateBatchesdeleteById(id);
        if (this.tableData.length === 1) {
          this.pageNo = 1;
        }
        this.$notification.success({
          message: "操作成功"
        });
        this.onGetCalculateBatches();
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    changeSW(e) {
      if (e === 1) {
        // this.$router.replace({ name: "applyForInfo", query: { id: "468B1BA6B3004816994175579B865E14" } });
        this.$router.push({ name: "calculateAdd", query: { pageType: "selectPeople" } });
      }
      if (e === 2) {
        this.$router.push({ name: "calculateAdd", query: { pageType: "importPeople" } });
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
